<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>订单结算</title>
		<meta name="keywords" content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/reset.css">
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/style.css" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/layui/css/layui.css" />
		<script type="text/javascript" src="__STATIC__/home/js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" src="__STATIC__/home/js/date.js" ></script>
		<script type="text/javascript" src="__STATIC__/home/js/iscroll.js" ></script>
		<script type="text/javascript" src="__STATIC__/home/layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use('form', function () {
				var form = layui.form;
			});
			$(function() {
				var should_paytime = $("#should_paytime").val();
				var now_time = Math.floor((new Date()).getTime()/1000);
				var cha = parseInt(should_paytime)-parseInt(now_time);
				if(cha/60>0){
					var a = Math.floor(cha/60);
					var b = cha-a*60;
					var all = a+":"+b;
				}
				var m = Number(all.substring(0, all.indexOf(":")));
				var s = Number(all.substring(all.indexOf(":") + 1, all.length + 1));
				var f = setInterval(function() {
					if(s < 10) {
						//如果秒数少于10在前面加上0
						$('#time').html(m + ':0' + s);
					} else {
						$('#time').html(m + ':' + s);
					}
					s--;
					if(s < 0) {
						//如果秒数少于0就变成59秒
						if(m==0){
							window.clearInterval(f); 
						}
						m--;
						s = 59;
					}
					if(s==0&& m==0){
						layer.msg("该订单超时",{
							time:2000,
							icon:5
						});
						setTimeout('window.location.href="/home/index/index"',2000);
					}
				}, 1000)
			})
			/*支付标签切换*/
			$(function(){
				$(".payway").click(function(){
					$(".fr>img").attr("src","img/check (1).png");
					$(this).find(".fr>img").attr("src","img/check (2).png") ;
				})
			})
		</script>

	<script type="text/javascript">
		$(function(){
			$('#beginTime').date();
			$('#endTime').date({theme:"datetime"});
		});
	</script>
	</head>

	<body style="overflow-y: scroll;height: 100%;">
		<div class="pay-order-header">
			<ul>
				<li>支付剩余时间</li>
				<li id="time"></li>
			</ul>
		</div>
		
		<div class="order-details-header clearfix">			
			<h4 class="fl" style="margin: 5px;">就餐方式</h4>	
			<select name="eatWay" class="fr eatWay">
				<option value="pack">打包</option>
				<option value="here">堂吃</option>
				<option value="deliver">外卖</option>
			</select>
		</div>
		<table width="100%" class="bg-fff order-det-cont" >
			<input type="hidden" value="{$order_info.id}" id="order_id">
			<input type="hidden" value="{$order_info.should_paytime}" id="should_paytime">
			<tbody>
				<tr>
					<td align="left" class="padl3" style="color:#999">订单号</td>
					<td align="right" width="50%" style="color:#999">{$order_info.order_str}</td>	
				</tr>
				<tr style="border-bottom: solid 8px #f1f1f1;" class="changeAddress" is_address="{$is_address}">
					<td align="left" class="padl3">交餐地点<em style="color:blue">(点击更换)</em></td>
					<td align="right" width="50%">{$order_info.address_content}</td>	
				</tr>
				<tr style="border-bottom:none;">
					<td class="padl3" style="width:100%;color:#999">餐品详情</td>
				</tr>
					{volist name="$order_info.food_list" id="food"}
					<tr>
						<td align="left" class="padl3">{$food[0]}</td>
						<td align="right" width="50%">×<em>{$food[1]}</em></td>	
					</tr>
					{/volist}
				<tr>
					<td align="left" colspan="1" class="padl3">餐品总额</td>
					<td align="right" class="padr3">￥<em>{$order_info.sumprice}</em></td>
				</tr>	
				<tr style="border-top: solid 8px #f1f1f1;">
					<td align="left" colspan="1" class="padl3">实付金额:</td>
					<td align="right" class="padr3">
						<a href="#" class="colorf00" style="padding-right: 4%;">￥{$order_info.sumprice}
					</td>
				</tr>
			</tbody>
		</table>
		
		<div style="height:1rem;"></div>
		<div class="order-set-paybutton">
			<div class="paybutton-left fl" style="width: 40%;text-align: center;" onclick="delOrder();">取消</div>
			<div class="paybutton-right fr" style="width: 60%;text-align: center;"><a onclick="confirmOrder();">确认订单并支付</a></div>
			<div class="clearfix"></div>
		</div>
<div id="datePlugin"></div>
	</body>
	<script>
	$(".changeAddress").click(function(){
		var order_id = $("#order_id").val();
		if($(this).attr("is_address")){
			window.location.href="/home/own/pickaddress?order_id="+order_id;
		}else{
			window.location.href="/home/own/address";
		}
	});

	function confirmOrder(){
		var eatWay = $(".eatWay").val();
		var order_id = $("#order_id").val();
		$.ajax({
			type: 'post',
			url: "/home/order/orderPay",
			data: { eatWay: eatWay,order_id:order_id},
			dataType: 'json',
			async: false,
			success:function(data){
				if(data.status){
					window.location.href="/home/order/paysuccess";
				}
			}
		});
	}

	function delOrder(){
		var order_id = $("#order_id").val();
		$.ajax({
			type: 'post',
			url: "/home/order/delOrder",
			data: {order_id:order_id},
			dataType: 'json',
			async: false,
			success:function(data){
				if(data.status){
					layer.msg("订单取消成功",{
						time:2000,
						icon:6
					});
					setTimeout('window.location.href="/home/index/index"',2000);
				}
			}
		});
	}
	</script>
</html>